import React, { useEffect, useState } from 'react';
import { Radio, Form, Tabs, Space, Table, Tag, Select, Button, Flex, Modal, Image, Input, Cascader } from 'antd';
import type { TabsProps, CascaderProps, RadioChangeEvent } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// import { Model } from 'echarts';
import styles from './notify.module.scss';
import { domainToASCII } from 'url';
import { use } from 'echarts/types/src/extension.js';
import { notifyApi } from '@/apis';
import { useLocation } from 'react-router-dom';
// import { useLocale } from 'antd/es/locale';


// notifyApi.setDate


const { TextArea } = Input;
const boxStyle: React.CSSProperties = {
  width: '100%',
  height: 40,
  borderRadius: 6,
  // border: '1px solid #40a9ff',
};

const justify = 'flex-end';
const alignItems = 'center';
const gap = 'small'

const onChange = (value: string) => {
  console.log(`selected ${value}`);
};

const onSearch = (value: string) => {
  console.log('search:', value);
};

const Content: React.FC<any> = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isBookModalOpen, setIsBookModalOpen] = useState(false);
  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
  // const [remark, setRemark] = useState('');//留言
  // 留言input框发生改变
  // const bookArr = 
  const [bookArr, setBooxArr] = useState([
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" },
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" },
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" }])
  const remarkChange = (e) => {
    console.log(e)
  }

  // 详情弹窗模块
  const openDetail = (row) => {
    console.log('打开弹窗1')
    setIsModalOpen(true);
    console.log(isModalOpen, 'isModalOpen', row);
    setRowDetails(row)
  };
  const openGuestbook = () => {
    setIsBookModalOpen(true)
  }
  const dataSource = [
    {
      key: '1',
      title: '测试',
      type: '通告',
      summary: '西湖区湖底公园1号',
      readCount: '10',
      replyCount: '5',
      creardTime: '2025、1、15',
      pushStatus: '已发布',
      detail: ''
    }

  ];
  const handleCancel = () => {
    console.log('关闭弹窗')
    setIsModalOpen(false);
  };
  //关闭留言弹窗
  const bookHandleCancel = () => {
    setIsBookModalOpen(false)
  }
  const changeBox = () => {
    setBooxArr(bookArr)
  }
  const handleOk = () => {
    bookArr[1].remark = remark;
    setIsInputModalOpen(false);
    console.log(remark, '111');
    changeBox()
  };
  // 我收到的表头
  const columns = [
    {
      title: 'id',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '摘要',
      dataIndex: 'summary',
      key: 'summary',
    }, {
      title: '发件方',
      dataIndex: 'readCount',
      key: 'readCount',
    },
    {
      title: '已读情况',
      dataIndex: 'replyCount',
      key: 'replyCount',
    }, {
      title: '收件时间',
      dataIndex: 'pushTime',
      key: 'pushTime',
    },


    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          {/* <a onClick={openGuestbook}>留言</a> */}
          <a onClick={() => { openDetail(record) }}>详情</a>
        </Space>
      ),
    },
  ];
  const MiddleSection: React.FC = () => {
    return <div>
      <div className={styles.table_top}   >
        类型:
        <Select
          showSearch
          placeholder="选择通知类型"
          optionFilterProp="类型"
          onChange={onChange}
          onSearch={onSearch}
          options={[
            {
              value: '1',
              label: '通告',
            },
            {
              value: '2',
              label: '消防宣传',
            },
            {
              value: '3',
              label: '会议通知',
            },
          ]}
        />
        <Button type="primary">查询</Button>
      </div>

    </div>
  }

  // const [formData, setFormData] = useState({ remark: '', });;
  // const remark = '';
  const [remark, setRemark] = useState('');//留言
  const boxStyle: React.CSSProperties = {
    width: '100%',
    height: 40,
    borderRadius: 6,
    // border: '1px solid #40a9ff',
  };
  const justify = 'flex-start';
  const alignItems = '';
  const itemTitle = {
    width: '100px',
    height: '40px',
    paddingRight: '20px',
    fontSize: 'bold'
  }
  const modelStyle = {
    height: '800px',
    width: '600px'
  }
  //关闭详情弹窗
  // const handleCancel = () => {
  //   setIsModalOpen(false);
  // };

  const Footer = () => {
    return <div> <Button onClick={handleCancel}>关闭</Button></div>
  }

  const bookFooter = () => {
    return <div> <Button onClick={bookHandleCancel}>关闭</Button></div>
  }
  //留言基础数据
  const BookItem = () => {


    const handleReply = (row) => {
      console.log(row, 'row');
      setIsInputModalOpen(true)
    }

    const isInputModalOpen = () => {

    }

    return <div className={styles.box}>
      <div className={styles.box_left} >
        {bookArr.map((item, index) => (
          <div className={styles.boxItem}>
            <div className={styles.item_title} key={index}>
              <div className={styles.item_title_name}> {item.name} </div>
              <div> {item.rName} </div>
              <div>{item.time}</div>
            </div>
            <div>111111</div>
            <div className={styles.reply} onClick={() => { handleReply(item) }}>回复</div>
          </div>

        ))

        }
      </div>
      <div className={styles.box_right}>
        {bookArr.map((item, index) => (
          <div className={styles.boxItem}>
            <div className={styles.item_title} key={index}>
              <div className={styles.item_title_name}>园区管理员：回复 </div>
            </div>
            <div>{item.remark}</div>
            <div></div>
          </div>

        ))

        }
      </div>
    </div>
  }
  const [rowDetails, setRowDetails] = useState({
    title: '',
    type: '',
    summary: '',
    readCount: '',
    replyCount: '',
    creardTime: '',
    pushStatus: '',
    details: ''
  })
  //详情弹窗
  return <div>
    <Modal title="通知公告-消防宣传 详情" width={800} // 设置宽度
      height={1000} // 设置高度
      footer={Footer}
      // cancelText={'关闭'}
      style={modelStyle} // 通过 style 属性更灵活地设置位置和尺寸
      open={isModalOpen} >
      <div className={styles.addBox}>
        <div className={styles.addBox_title}>
          <div className={styles.add_title_bt}  >标题:</div>
          <div className={styles.addBox_title_item}>类型</div>
          <div className={styles.addBox_title_item}>摘要</div>
          <div className={styles.addBox_title_item}>收件方</div>
          <div className={styles.addBox_title_item}>详情</div>
        </div>
        <div className={styles.addBox_content}>
          <div className={styles.addBox_content_bt}>{rowDetails.title}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.creardTime}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.type}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.summary}</div>


          <div className={styles.details} dangerouslySetInnerHTML={{ __html: rowDetails.details }}>

          </div>
        </div>
      </div>

    </Modal>
    {/* 留言弹窗 */}
    <Modal title='通知公告-消防宣传 留言回复' width={1000} open={isBookModalOpen} footer={bookFooter} >
      <div>
        <div className={styles.bookTitle}>标题：消防安全检查</div>
        <BookItem></BookItem></div>
    </Modal>
    {/* 回复留言弹窗 */}
    <Modal title="留言回复" open={isInputModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="随便写" id="remark" name="remark" value={remark} onChange={(e) => setRemark(e.target.value)} />
    </Modal>
    <div className='MiddleSection'>
      <MiddleSection></MiddleSection>
    </div>
    <Table dataSource={dataSource} columns={columns} />
  </div>;
}
//级联选择器


const Content2: React.FC<any> = ({data, onChange}) => {
  const [isAddModalOpen, setIsAddModaOpen] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isBookModalOpen, setIsBookModalOpen] = useState(false);
  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
  const [remark, setRemark] = useState('');//留言弹窗
  const [bookArr, setBooxArr] = useState([
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" },
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" },
    { name: '企业名称', rName: '人员', time: '2025-1-14 19:40:57', remark: "" }])
  const remarkChange = (e) => {
    console.log(e)
  }
  const openIsAddModalOpen = () => {
    form.resetFields();
    setIsAddModaOpen(true)
  }
  //选择私信负责人
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  // 详情
  useEffect(()=>{
    setDataSource(data);
    // 
    console.log(data,'data')
  },[data])

  const [dataSource, setDataSource] = useState([{
    index: '1',
    title: '测试',
    type: '通告',
    summary: '西湖区湖底公园1号',
    readCount: '10',
    replyCount: '5',
    creardTime: '2025、1、15',
    pushStatus: '已发布'
  },])
  const [details, setDetails] = useState('')
  const location = useLocation();

  const addHandleOk = () => {
    setIsAddModaOpen(false);
    const currentTime = new Date();
    const formattedTime = currentTime.toLocaleTimeString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
    console.log('2', obj, form.getFieldsValue(), dataSource, formattedTime);
    const typeProcess = (type) => {
      let typeStr = '';
      let typeProcess = [{
        value: '1',
        label: '通告',
      },
      {
        value: '2',
        label: '消防宣传',
      },
      {
        value: '3',
        label: '会议通知',
      },]
      typeProcess.forEach(element => {
        if (element.value == type) {
          typeStr = element.label
        }
      });
      return typeStr
    }
    const newA = dataSource.concat({
      readCount: '10',
      replyCount: '5',
      ...form.getFieldsValue(),
      index: dataSource.length + 1,
      pushStatus: '已发布',
      creardTime: formattedTime,
      type: typeProcess(form.getFieldsValue().type)
    });
    notifyApi.setData({ key: location.pathname, value: JSON.stringify(newA, null, 2) }).then(
      ()=>{
        onChange?.();
      }
    )
    
    // console.log(dataSource, 'dataSource');
    // setDataSource(newA);

  }
  //关闭留言弹窗
  const bookHandleCancel = () => {
    setIsBookModalOpen(false)
  }
  //tab数据
  // const dataSource = [
  //   {
  //     key: '1',
  //     title: '测试',
  //     type: '通告',
  //     summary: '西湖区湖底公园1号',
  //     readCount: '10',
  //     replyCount: '5',
  //     creardTime: '2025、1、15',
  //     pushStatus: '已发布'
  //   },


  // ];


  const options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  //发布的通知表头
  const columns = [
    {
      title: 'id',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '摘要',
      dataIndex: 'summary',
      key: 'summary',
    }, {
      title: '已读量',
      dataIndex: 'readCount',
      key: 'readCount',
    },
    {
      title: '回复量',
      dataIndex: 'replyCount',
      key: 'replyCount',
    }, {
      title: '创建时间',
      dataIndex: 'creardTime',
      key: 'creardTime',
    },
    {
      title: '推送',
      dataIndex: 'pushStatus',
      key: 'pushStatus',
      render: (text) => <a>{text.pushStatus}</a>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          {/* <a onClick={openGuestbook}>留言</a> */}
          <a onClick={() => { openDetail(record) }}>详情</a>
        </Space>
      ),
    },
  ];
  const changeBox = () => {
    setBooxArr(bookArr)
  }
  //留言回复确认
  const handleOk = () => {
    bookArr[1].remark = remark;
    setIsInputModalOpen(false);
    console.log(remark, '111');
    changeBox()
  }
  bookArr
  //留言基础数据
  const BookItem = () => {


    const handleReply = (row) => {
      console.log(row, 'row');
      setIsInputModalOpen(true)
    }

    const isInputModalOpen = () => {

    }

    return <div className={styles.box}>
      <div className={styles.box_left} >
        {bookArr.map((item, index) => {

          const dom = <div className={styles.boxItem}>
            <div className={styles.item_title} key={index}>
              <div className={styles.item_title_name}> {item.name} </div>
              <div> {item.rName} </div>
              <div>{item.time}</div>
            </div>
            <div>111111</div>
            <div className={styles.reply} onClick={() => { handleReply(item) }}>回复</div>
          </div>

          return dom
        })

        }
      </div>
      <div className={styles.box_right}>
        {bookArr.map((item, index) => {
          let dom = <div className={styles.boxItem}>
            <div className={styles.item_title} key={index}>
              <div className={styles.item_title_name}>园区管理员：回复 </div>
            </div>
            <div>{item.remark}</div>
            <div></div>
          </div>
          if (!item.remark) {
            dom = null
          }
          return dom
        })

        }
      </div>
    </div>
  }
  const handleCancel = () => {
    setIsAddModaOpen(false)
  }

  const openGuestbook = () => {
    setIsBookModalOpen(true)
  }

  const [typeVal, setTypeVal] = useState(false);
  const onChangeType = (e) => {
    setTypeVal(e.target.value);
  }

  const openDetail = (row) => {
    console.log('打开弹窗2')
    setIsModalOpen(true);
    console.log(isModalOpen, 'isModalOpen', row);
    setRowDetails(row)
  };

  //搜索  
  const [searchName, setSearchName] = useState('');
  const changeInput = (val) => {
    console.log(val, 'val')
    setSearchName(val)
  }
  const MiddleSection2 = () => {
    return <div className={styles.table_top}>
      <Form
        name=''
        onFinish={onFinish}
        layout="inline"
      >
        <Form.Item

        >
          <Button type="primary" icon={<PlusOutlined />} onClick={openIsAddModalOpen}>创建</Button>
        </Form.Item>
        <Form.Item label="类型" name="type">
          <Select
            defaultValue="通告"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              {
                value: '1',
                label: '通告',
              },
              {
                value: '1',
                label: '消防宣传',
              },

              {
                value: '3',
                label: '会议通知',
              },
            ]}
          />
        </Form.Item>
        {/* <div className={styles.table_top_text2}> 标题名称：</div> */}

        <Form.Item
          label="标题名称"
          name="title"

        >
          <Input width={200} value={searchName} onChange={changeInput}></Input>
        </Form.Item>
        <Button>查询</Button>
      </Form>
    </div>
  }
  const itemTitle = {
    width: '100px',
    height: '40px',
    paddingRight: '20px',
    fontSize: 'bold'
  }
  const Footer = () => {
    return <div> <Button onClick={() => { setIsModalOpen(false) }}>关闭</Button></div>
  }
  const bookFooter = () => {
    return <div> <Button onClick={bookHandleCancel}>关闭</Button></div>
  }
  const [obj, setObj] = useState({
    key: '1',
    title: '测试',
    type: '通告',
    summary: '西湖区湖底公园1号',
    readCount: '0',
    replyCount: '0',
    creardTime: '2025、1、15',
    pushStatus: '已发布',
    detail: ''
  })
  const [form] = Form.useForm()
  // const obj = {
  //   key: '1',
  //   title: '测试',
  //   type: '通告',
  //   summary: '西湖区湖底公园1号',
  //   readCount: '10',
  //   replyCount: '5',
  //   creardTime: '2025、1、15',
  //   pushStatus: '已发布',
  //   detail: ''
  // }
  const changeDetails = (row) => {
    console.log(row);
    obj.detail = row;
  }
  const modelStyle = {
    height: '800px',
    width: '600px'
  }
  const onFinish = (values: any) => {
    console.log('Success:', values);

  };
  const [rowDetails, setRowDetails] = useState({
    title: '',
    type: '',
    summary: '',
    readCount: '',
    replyCount: '',
    creardTime: '',
    pushStatus: '',
    details: ''
  })
  return <div>
    <Modal title='通知公告 消防宣传创建' width={1000} okButtonProps={{ htmlType: 'submit' }} okType='primary' open={isAddModalOpen} onOk={addHandleOk} onCancel={handleCancel}>
      <Form
        name=''
        form={form}
        onFinish={onFinish}
      >
        <div className={styles.addBox}>
          {/* <div className={styles.addBox_title}>
            <div className={styles.add_title_bt}  >标题:</div>
            <div className={styles.addBox_title_item}>类型</div>
            <div className={styles.addBox_title_item}>摘要</div>
          
            <div className={styles.addBox_title_item}>详情</div>
          </div> */}
          <div className={styles.addBox_content}>
            <div className={styles.addBox_content_bt}>
              <Form.Item
                label="标题"
                name="title"

              >
                <Input />
              </Form.Item>
              {/* <Input value={obj.title} onChange={ }></Input> */}
            </div>
            <div className={styles.addBox_content_item}>
              <Form.Item
                label="类型"
                name="type"
              >
                <Radio.Group onChange={onChangeType} value={obj.type}>
                  <Radio value={1}>通告</Radio>
                  <Radio value={2}>消防宣传</Radio>
                  <Radio value={3}>会议通知</Radio>

                </Radio.Group>
              </Form.Item>
            </div>
            <div className={styles.addBox_content_item} >
              <Form.Item
                label="摘要"
                name="summary"
              >
                <TextArea
                  placeholder=""
                  autoSize={{ minRows: 2, maxRows: 6 }}
                  value={obj.summary}
                />
              </Form.Item>
            </div>
            {/* <div className={styles.addBox_content_item}>位置：  <Cascader options={options} onChange={onChange} placeholder="Please select" />
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: 'jack', label: 'Jack' },
                { value: 'lucy', label: 'Lucy' },
                { value: 'Yiminghe', label: 'yiminghe' },
                { value: 'disabled', label: 'Disabled', disabled: true },
              ]}
            />
          </div> */}
            <div>
              <Form.Item
                label="详情"
                name="details"
              >
                <ReactQuill theme="snow" ></ReactQuill>
              </Form.Item>
            </div>
          </div>
        </div>
      </Form>
    </Modal >
    <Modal title="通知公告-消防宣传 详情" width={800} // 设置宽度
      height={1000} // 设置高度
      footer={Footer}
      style={modelStyle}
      // cancelText={'关闭'}
      // 通过 style 属性更灵活地设置位置和尺寸
      open={isModalOpen} >
      <div className={styles.addBox}>
        <div className={styles.addBox_title}>
          <div className={styles.add_title_bt}  >标题</div>
          <div className={styles.addBox_title_item}>发布时间</div>
          <div className={styles.addBox_title_item}>类型</div>
          <div className={styles.addBox_title_item}>摘要</div>

          <div className={styles.addBox_title_item}>详情</div>
        </div>
        <div className={styles.addBox_content}>
          <div className={styles.addBox_content_bt}>{rowDetails.title}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.creardTime}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.type}</div>
          <div className={styles.addBox_content_item1}> {rowDetails.summary}</div>


          <div className={styles.details} dangerouslySetInnerHTML={{ __html: rowDetails.details }}>

          </div>
        </div>
      </div>
      {/* <div className={styles.detailsBox}>
        <Form labelAlign='left'>
          <Form.Item label="标题" >
            <span className="">{rowDetails.title}</span>
          </Form.Item>
          <Form.Item label="发布时间">
            <span className="">{rowDetails.creardTime}</span>
          </Form.Item>
          <Form.Item label="类型">
            <span className="">{rowDetails.type}</span>
          </Form.Item>
          <Form.Item label="摘要">
            <span className="">{rowDetails.summary}</span>
          </Form.Item>
          <Form.Item label="详情">
            <div className={styles.details} dangerouslySetInnerHTML={{ __html: rowDetails.details }}>

            </div>
          </Form.Item>
        </Form>
      </div> */}

      {/* <Flex style={boxStyle} vertical={true} justify={justify} align={alignItems}>
        <Flex><Flex style={itemTitle} align='center' justify='flex-end'>标题</Flex><Flex align='center'>11111</Flex></Flex>
        <Flex><Flex style={itemTitle} align='center' justify='flex-end'>收件时间</Flex><Flex align='center'>11111</Flex></Flex>
        <Flex><Flex style={itemTitle} align='center' justify='flex-end'>类型</Flex><Flex align='center'>11111</Flex></Flex>
        <Flex><Flex style={itemTitle} align='center' justify='flex-end'>摘要</Flex><Flex align='center'>11111</Flex></Flex>
        <Flex><Flex style={itemTitle} align='center' justify='flex-end'>收件方</Flex><Flex align='center'>11111</Flex></Flex>
        <Flex justify='flex-start'><Flex style={{
          width: '100px',
          height: '40px',
          paddingRight: '20px',
          fontSize: 'bold',
          marginTop: '10px'
        }} align='flex-start' justify='flex-end'>详情</Flex><Flex style={{ marginTop: '10px' }} align='flex-start' justify='flex-start' vertical={true}><div>111</div>
            <div>2222</div>
            <div>3333</div>
            <Image
              width={200}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
          </Flex></Flex>

      </Flex> */}

    </Modal>
    {/* 留言弹窗 */}
    <Modal title='通知公告-消防宣传 留言回复' width={1000} open={isBookModalOpen} footer={bookFooter} >
      <div>
        <div className={styles.bookTitle}>标题：消防安全检查</div>
        <BookItem></BookItem></div>
    </Modal>
    {/* 回复留言弹窗 */}
    <Modal title="留言回复" open={isInputModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="随便写" id="remark" name="remark" value={remark} onChange={(e) => setRemark(e.target.value)} />
    </Modal>
    <MiddleSection2></MiddleSection2>
    <Table dataSource={dataSource} columns={columns} />

  </div >
}


const App: React.FC = () => {
  const [data, setData]  =useState([])
  const fetchData = () => {
    notifyApi.getData({ key: location.pathname }).then((res) => {
      setData(JSON.parse(res.value))
    })
  }
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '我发布的通知',
      children: <div>
        <Content2 data={data} onChange={fetchData}></Content2>
      </div>,
    },
    {
      key: '2',
      label: '我收到的通知',
      children: <div>
        <Content data={data}></Content>

      </div>,
    },

  ];
  const location = useLocation();
  useEffect(() => {
    console.log('组件已加载', notifyApi);

    // let api = new notifyApi;
    fetchData()


  }, []);


  
  return <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;
}




export default App;